import QtQuick 2.0

Item {
    id: root
    anchors.fill: parent

    Rectangle {
        id: box
        width: 200
        height: 550
        anchors.centerIn: parent
        color: "gray"
        border.color: "black"
        Column {
            spacing: 30
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 50
            Rectangle {
                id: light1
                width: 120
                height: 120
                radius: width
                color: Qt.lighter("gray")
                border.color: "lightgray"
            }
            Rectangle {
                id: light2
                width: 120
                height: 120
                radius: width
                color: Qt.lighter("gray")
                border.color: "lightgray"
            }
            Rectangle {
                id: light3
                width: 120
                height: 120
                radius: width
                color: Qt.lighter("gray")
                border.color: "lightgray"
            }
        }

        MouseArea {
            id: ma
            anchors.fill: parent
            onClicked: {
                box.stateCheck()
            }
        }

        Timer {
            id: timer
            interval: 1000
            repeat: true
            onTriggered: {
                box.stateCheck()
            }
        }

        function stateCheck() {
            // stop -> go -> warn
            switch (box.state) {
            case "stop":
                box.state = "go"
                break
            case "go":
                box.state = "warn"
                break
            case "warn":
                box.state = "stop"
                break
            }
        }

        Component.onCompleted: {
            timer.start()
        }

        state: "stop"
        states: [
            State {
                name: "stop"
                // 按条件启用
                // when: ma.pressed
                PropertyChanges { target: light1; color: "red" }
                PropertyChanges { target: light2; color: "black" }
                PropertyChanges { target: light3; color: "black" }
            },
            State {
                name: "go"
                PropertyChanges { target: light1; color: "black" }
                PropertyChanges { target: light2; color: "green" }
                PropertyChanges { target: light3; color: "black" }
            },
            State {
                name: "warn"
                PropertyChanges { target: light1; color: "black" }
                PropertyChanges { target: light2; color: "black" }
                PropertyChanges { target: light3; color: "yellow" }
            }
        ]

        transitions: [
            Transition {
                from: "stop"
                to: "go"
                ColorAnimation {
                    target: light1
                    from: "red"; to: "black"
                    duration: 200
                }
                ColorAnimation {
                    target: light2
                    from: "black"; to: "green"
                    duration: 200
                }
            },
            Transition {
                from: "go"
                to: "warn"
                ColorAnimation {
                    target: light2
                    from: "green"; to: "black"
                    duration: 200
                }
                ColorAnimation {
                    target: light3
                    from: "black"; to: "yellow"
                    duration: 200
                }
            },
            Transition {
                from: "warn"
                to: "stop"
                ColorAnimation {
                    target: light1
                    from: "black"; to: "red"
                    duration: 200
                }
                ColorAnimation {
                    target: light3
                    from: "yellow"; to: "black"
                    duration: 200
                }
            }
        ]
    }
}
